<script setup lang="ts">
import { useAppStore } from "@/store/modules/app.store";
import { useUserStore } from "@/store/modules/user.store";
import { checkUserLogin, loginByOpenid } from "@/api/user";
import { useUi } from "@/use/ui";

const appStore = useAppStore();
const userStore = useUserStore();
const { confirm } = useUi();

const toLogin = () => {
  uni.navigateTo({
    url: "/package/mine/login"
  });
};

const toCreate = () => {
  if (userStore.user.isLogin) {
    uni.navigateTo({
      url: "/package/agency/create"
    });
  } else {
    toLogin();
  }
};

const toMyBuy = () => {
  if (userStore.user.isLogin) {
    uni.navigateTo({
      url: "/package/mine/buy"
    });
  } else {
    toLogin();
  }
};

const toMySell = () => {
  if (userStore.user.isLogin) {
    uni.navigateTo({
      url: "/package/agency/mysell"
    });
  } else {
    toLogin();
  }
};

const toMyInfo = () => {
  uni.navigateTo({
    url: "/package/mine/info"
  });
};

const wxLogin: () => Promise<string> = () => {
  return new Promise((resolve) => {
    uni.login({
      provider: "weixin",
      success: (res) => {
        if (res.errMsg === "login:ok") {
          resolve(res.code);
        } else {
          resolve("");
        }
      },
      fail: () => {
        resolve("");
      }
    });
  });
};

const openidLogin = async () => {
  if (!userStore.openid) return;
  try {
    const { success, data } = await loginByOpenid(userStore.openid);
    if (success) {
      userStore.user = {
        ...data,
        isLogin: true
      };
      return true;
    }
  } catch (error) {}
};

const checkToken = async () => {
  if (!userStore.token) return false;
  try {
    const result = await checkUserLogin();
    if (result.success) {
      userStore.user = {
        ...result.data,
        isLogin: true
      };
      return true;
    } else {
      userStore.token = "";
      return false;
    }
  } catch (error) {
    userStore.token = "";
    return false;
  }
};

const init = async () => {
  const isTokenLogin = await checkToken();
  if (!isTokenLogin) {
    openidLogin();
  }
};

const logout = async () => {
  const isLogout = await confirm({
    title: "提示",
    content: "确定要注销登录吗？",
    confirmText: "确定注销",
    cancelText: "我再想想"
  });

  if (isLogout) {
    userStore.user = {
      isLogin: false
    };
    userStore.token = "";
    userStore.openid = "";

    uni.showToast({
      title: "注销登录成功",
      icon: "success"
    });
  }
};

onLoad(async () => {
  init();
});
</script>

<template>
  <view class="content">
    <up-swiper
      height="350rpx"
      indicator
      bg-color="transparent"
      radius="10"
      :list="appStore.bannerList"
      name="url"
      mode="dot"
    ></up-swiper>
    <view class="main">
      <view class="haction">
        <up-button type="primary" size="large" @click="toCreate">创建订单</up-button>
      </view>
      <view class="haction">
        <up-button type="warning" size="large" @click="toMySell">订单管理</up-button>
      </view>
      <view class="haction">
        <up-button type="success" size="large" @click="toMyBuy">我的定制</up-button>
      </view>
      <view class="haction" v-if="userStore.user.isLogin">
        <up-button type="info" size="large" @click="toMyInfo">个人信息</up-button>
      </view>
      <view class="haction" v-if="userStore.user.isLogin">
        <up-button type="error" size="large" @click="logout">注销登录</up-button>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
page {
  height: 100%;
}
/* #ifdef MP-WEIXIN */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
/* #endif */

.content {
  padding: 0 15rpx;
  background-color: #000;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-image: url("https://bbl-1329058988.cos.ap-beijing.myqcloud.com/stick/assets/stick_bg.jpg");
  background-size: cover;
  background-position: center;
  .main {
    flex: 1;
    padding: 150rpx 50rpx 0;
    box-sizing: border-box;
    .haction {
      & + .haction {
        margin-top: 100rpx;
      }
    }
  }
}
</style>
